<template>
    <div style="padding-top: 59px;">
        <div class="top-panel w" style="padding: 0px 15px; margin-top: 20px;">
            <!-- <div class="w">
                <el-row>
                    <el-col :span="24">
                        <div class="title-big">通知中心</div>
                        <div class="title-tip">在这里，您可以浏览查看平台、项目托管、交易、实施等通知消息</div>
                    </el-col>
                </el-row>
            </div> -->
            <div class="clearfix">
                <div class="title-big fl">通知中心<span class="title-tip">在这里，您可以浏览查看平台、项目托管、交易、实施等通知消息</span></div>
            </div>
        </div>

        <div class="mtb-large">
            <div class="w">
                <el-tabs class="panel" v-model="activeName" @tab-click="handleClick">
                    <div class="notice-item-list" v-show="!listIsZero">
                        <ul class="notice-list">
                            <li v-for="(item,index) in listData.data" :key="index">
                                <el-row>
                                    <el-col :span="20">
                                        <p class="notice-data">
                                            {{item.m_content}}
                                        </p>
                                    </el-col>
                                    <el-col :span="3">
                                        <p class="notice-date">{{item.m_create_time}}</p>
                                    </el-col>
                                    <el-col :span="1">
                                        <i class="el-icon-delete del-size" @click="delnot(item.m_id,item.m_uid)"></i>
                                    </el-col>
                                </el-row>
                            </li>
                        </ul>
                        <!-- 分页 -->
                        <div class="pagination text-right">
                            <el-pagination layout="prev, pager, next" :total="listData.total" @current-change="listPage"></el-pagination>
                        </div>
                    
                    </div>
                    <!-- 暂无数据 -->
                    <div class="mt-large text-center" v-show="listIsZero" style="margin-top: 90px;">
                        <img src="../assets/images/empty.jpg" height="200" alt="">
                        <p class="tip-small">暂无数据</p>
                    </div>
                </el-tabs>
            </div>
        </div>

    </div>
</template>
<script>
    import '@/assets/css/workbench.css'
    export default {
        data(){
            return{
                activeName: 'all',
                page: 1,
                listData: {},
                listIsZero: true,
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            init(){
                var _this = this;

                this.$httpGet('/api/index/message/messagelist',{'page': this.page,'uid': window.localStorage.uid}).then(response => {

                    if(response.code == 200){

                        _this.listData = response.msg;
                        _this.listIsZero = false;
                        
                    }else if(response.code == 300){  //暂无数据
                        _this.listData.data = [];
                        _this.listIsZero = true;
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //切换页码
            listPage(page){
                this.page = page;
                this.list();
            },
            //删除消息
            delnot(mid,muid){
                var _this = this;

                this.$httpGet('/api/index/message/delmessage',{'m_id': mid,'m_uid': muid}).then(response => {

                    if(response.code == 200){

                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        _this.init();
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
<style>
    .mtb-large{
        margin: 20px auto;
    }
    .panel {
        width: 100%;
        background: #fff;
        -webkit-box-shadow: 0 1px 3px 0 rgba(206, 210, 214, .6);
        box-shadow: 0 1px 3px 0 rgba(206, 210, 214, .6);
        border-radius: 3px;
    }
    .panel .el-tabs__item{
        padding: 0 35px;
    }
    .el-tabs__nav{
        margin: 0 16px;
    }
    .el-tabs--top .el-tabs__item.is-top:nth-child(2){
        padding-left: 16px;
    }
    .el-tabs--top .el-tabs__item.is-top:last-child{
        padding-right: 16px;
    }
    .el-tabs__item{
        height: 45px;
        line-height: 45px;
        font-size: 15px;
    }
    .el-tabs__content{
        padding: 16px;
        min-height: 561px;
    }
    .notice-list li{
        line-height: 36px;
        border-bottom: 1px dashed #efefef;
    }
    .notice-link{
        color: #2093ff;
    }
    .del-size{
        font-size: 20px;
        cursor: pointer;
    }
    .del-size:hover{
        color: red;
    }
    .pagination{
        margin: 50px 0px 14px;
    }
    .el-pagination .btn-next, .el-pagination .btn-prev {
        border: 1px solid #d1dbe5;
        padding: 15.5px 0px;
    }
    .el-pager li.active {
        border-color: #20a0ff;
        background-color: #20a0ff;
        color: #fff;
        cursor: default;
    }
    .el-pager li.active+li{
        border-left: 0;
    }
    .el-pager li {
        padding: 0 4px;
        background: #fff;
        font-size: 14px;
        min-width: 38px;
        height: 33px;
        line-height: 33px;
        font-weight: normal;
        text-align: center;
        border-top: 1px solid #d1dbe5;
        border-left: 1px solid #d1dbe5;
        border-bottom: 1px solid #d1dbe5;
    }
    .el-icon{
        line-height: 0px;
    }
    .pagination .el-pagination__total{
        height: 33px!important;
        line-height: 33px!important;
    }
</style>



